<template>
  <div class="page">
    <div class="selectData">
      <span style="margin-right:10px;">季度:</span>
      <el-select
        size="small"
        class="userIntSize"
        v-model="quarter"
        clearable
        placeholder="请选择季度"
        @change="changequarterId"
      >
        <el-option
          v-for="item in quarterList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div id="YmyThree3"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quarter: 1,
      quarterList: [
        {
          id: 1,
          name: "第一季度"
        },
        {
          id: 2,
          name: "第二季度"
        },
        {
          id: 3,
          name: "第三季度"
        },
        {
          id: 4,
          name: "第四季度"
        }
      ]
    };
  },
  mounted() {
    this.changequarterId(1);
  },
  methods: {
    // 各区县得分排名分析展示
    dataAnalysis(val) {
      let echartsX = [];
      let echartsY = [];
      this.$axios
        .post("/taskDegree/getTeamScoreRank", { time: val })
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            res.data.forEach(item => {
              echartsX.push(item.taskName);
              echartsY.push({
                value: item.allScore,
                data: item.allScore,
                rank: item.rank
              });
            });
          }
          var YmyThree3 = this.$echarts.init(
            document.getElementById("YmyThree3")
          );
          YmyThree3.setOption({
            title: {
              text: "",
              left: "center"
            },
            tooltip: {
              trigger: "axis",
              position: function(pt) {
                return [pt[0], "10%"];
              },
              formatter(params) {
                const item = params[0];
                console.log(item);
                return `
                  分数：${item.data.data}
                  <br />
                  排名：${item.data.rank}
                `;
              }
            },
            grid: {
              left: "10%",
              bottom: "30%"
            },
            xAxis: {
              type: "category",
              data: echartsX,
              axisLabel: {
                // formatter: function (value) {
                //   return value.split("").join("\n");
                // },
                interval: 0,
                rotate: 60
              }
            },
            yAxis: {
              type: "value",
              minInterval: 1,
              boundaryGap: [0, 0.1],
              min: 60,
              max: 100
              // min: function (value) {
              //   return 1;
              // },
              // max: function (value) {
              //   return 15;
              // },
              // axisLabel: {
              //   formatter: function () {
              //     return "";
              //   },
              // },
            },
            series: [
              {
                // data: [100, 100, 50, 80, 70, 10, 20, 50, 66, 88],
                data: echartsY,
                type: "bar",
                // showBackground: true,
                barWidth: 30,
                backgroundStyle: {
                  color: "rgba(220, 220, 220, 0.8)"
                },
                itemStyle: {
                  normal: {
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function(params) {
                      var colorList = [
                        "#c52b6a",
                        "#ec4290",
                        "#ea3acf",
                        "#d539f7",
                        "#a82ada",
                        "#8114c0",
                        "#d8bd26",
                        "#b8ca23",
                        "#76a905",
                        "#80c13d",
                        "#4da758",
                        "#4aa4a5",
                        "#2a65b1",
                      ];
                      return colorList[params.dataIndex];
                    }
                  },
                  //鼠标悬停时：
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                }
              }
            ]
          });
          console.log(echartsX);
          console.log(echartsY);
        })
        .catch(err => {
          console.log(err);
        });
    },
    changequarterId(val) {
      this.dataAnalysis(val);
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  #YmyThree3 {
    width: 100%;
    height: 520px;
  }
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
